<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us - AceHub</title>
    <link rel="stylesheet" href="about-us.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/carousel.css">
    <link rel="stylesheet" href="css/media.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="shortcut icon" href="../header-footer/images/ico.jpg" type="image/x-icon">
    <link rel="stylesheet" href="../header-footer/common.css">

</head>
<body>
    <!-- 页眉 (将由公共文件引入) -->
    <!-- 页眉 -->
    <header class="navbar">
        <div class="nav">
            <div class="logo">
                <a href="../Homepage/WebsiteHomepage.html"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <nav>
                <ul>
                    <!-- TODO 补充链接 -->
                    <li><a href="../Homepage/WebsiteHomepage.html">home page</a></li>
                    <li><a href="./courseList.html">course</a></li>
                    <li><a href="./league.html">Alliance colleges</a></li>
                    <li><a href="./about-us.html">About Us</a></li>
                </ul>
            </nav>
        </div>
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="Search for ">
            <button type="button" id="searchButton"><i class="fas fa-search"></i></button>
        </div>
        <div class="info">
            <!-- TODO 补充链接 -->
        </div>
    </header>

    <main class="about-page">
        
        <!-- 修改后的fullscreen-hero部分 -->
<!-- 修改后的fullscreen-hero部分 -->
<section class="fullscreen-hero">
    <div class="hero-content">
        <h1>About AceHub</h1>
        <p class="subtitle">Connecting knowledge with the future</p>
    </div>
    
    <!-- 新增的故事内容 - 现在放在全屏中央 -->
    <div class="hero-story">
        <h2>From Original Aspiration to Innovation: Our Journey of Educational Technology</h2>
        <p>In the spring of 2020, when the world pressed the pause button, a group of educators and technology experts from major universities gathered in a small office and had a bold idea: to redefine the learning experience with technology. This is the starting point of AceHub.</p>
        
        <p>We have not only built an online education platform, but also created a warm learning ecosystem. True education should be like sunshine, shining into the hearts of every seeker of knowledge. Technology is not a cold tool, but a lever that amplifies the power of education.</p>
        
        <p>Over the past five years, we have witnessed server maintenance at 4am and received thank-you letters from our students; Having experienced the anxiety of technological bottlenecks, I now enjoy the joy of breakthroughs. From the initial beta version with only 3 courses, to today's complete curriculum system covering STEM, humanities and arts, vocational skills and other fields; From the anxiety of serving the first student, to now witnessing the growth and transformation of 200000 learners at AceHub.</p>
        
        <p>We always believe that educational technology is not meant to replace traditional classrooms, but to make high-quality educational resources as accessible as air. Behind every algorithm optimization, it is to match learning needs more accurately; Every course design embodies decades of experience accumulated by educators.</p>
        
        <p>This is the story of AceHub - a story about passion, perseverance, and innovation. We look forward to writing the next chapter together with you.</p>
    </div>
</section>
 

        <!-- 卡片网格布局 -->
        <section class="card-grid-section">
            <h2 class="section-title">Our advantages</h2>
            <div class="card-container">
                <div class="feature-card">
                    <i class="fas fa-graduation-cap"></i>
                    <h3>quality curriculum</h3>
                    <p>Collaborate with top universities to offer over 1000 premium courses</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-robot"></i>
                    <h3>AI assisted</h3>
                    <p>Intelligent learning assistant, personalized learning path recommendation</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-chalkboard-teacher"></i>
                    <h3>Professional Teachers</h3>
                    <p>Professors and industry experts from prestigious universities give lectures</p>
                </div>
            </div>
        </section>

        <!-- 时间线布局 -->
        <section class="timeline-section">
            <div class="timeline-bg"></div>
            <h2 class="section-title">development history</h2>
            
            <div class="fancy-timeline">
                <div class="timeline-path"></div>
                
                <div class="timeline-item">
                    <div class="timeline-year">2020</div>
                    <div class="timeline-card">
                        <h3>Platform Establishment</h3>
                        <p>AceHub has been officially established, releasing the first version of its online education platform</p>
                        <div class="timeline-icon">
                            <i class="fas fa-rocket"></i>
                        </div>
                    </div>
                </div>
                
                <div class="timeline-item">
                    <div class="timeline-year">2022</div>
                    <div class="timeline-card">
                        <h3>develop rapidly</h3>
                        <p>Obtained Series B financing, established cooperative relationships with multiple well-known universities, and launched mobile applications</p>
                        <div class="timeline-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                    </div>
                </div>
                
                <div class="timeline-item">
                    <div class="timeline-year">2023</div>
                    <div class="timeline-card">
                        <h3>University Franchise</h3>
                        <p>More than 50 cooperative universities have been established, with over 1000 courses and 200000 registered users</p>
                        <div class="timeline-icon">
                            <i class="fas fa-handshake"></i>
                        </div>
                    </div>
                </div>
                
                <div class="timeline-item">
                    <div class="timeline-year">2025</div>
                    <div class="timeline-card">
                        <h3>AI Empowerment</h3>
                        <p>Comprehensively upgrade the technical architecture, integrate Deepseek, and launch a mobile AI intelligent learning assistant</p>
                        <div class="timeline-icon">
                            <i class="fas fa-robot"></i>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 团队展示 -->
        <section class="team-showcase">
            <div class="team-bg"></div>
            <h2 class="section-title">core team</h2>
            <div class="team-members">
                <div class="team-member">
                    <div class="member-photo" style="background-image: url('images/bamboo.jpg')"></div>
                    <h3>Professor Xiang</h3>
                    <p class="member-role">Education experts</p>
                </div>
                <div class="team-member">
                    <div class="member-photo" style="background-image: url('images/sr.jpg')"></div>
                    <h3>Engineer Guo</h3>
                    <p class="member-role">technical director</p>
                </div>
            </div>
        </section>

        <!-- 联系表单 -->
        <section class="contact-section">
            <div class="contact-bg"></div>
            <div class="contact-container">
                <div class="contact-form">
                    <h2>Contact Us</h2>
                    <form>
                        <div class="form-group">
                            <input type="text" placeholder="您的姓名">
                        </div>
                        <div class="form-group">
                            <input type="email" placeholder="电子邮箱">
                        </div>
                        <div class="form-group">
                            <textarea placeholder="您的留言"></textarea>
                        </div>
                        <button type="submit">send a message</button>
                    </form>
                </div>
                
                <div class="contact-info">
                    <h3>contact information</h3>
                    <div class="contact-methods">
                        <div class="contact-method">
                            <i class="fas fa-envelope"></i>
                            <span>privacy@AceHub.com</span>
                        </div>
                        <div class="contact-method">
                            <i class="fas fa-phone"></i>
                            <span>400-789-4587</span>
                        </div>
                        <div class="contact-method">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>No. 3688 Nanhai Avenue, Nanshan District, Shenzhen<br>Legal Department, 14th Floor, AceHub Building</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-logo">
                <a href="#home"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <div class="footer-text">
                <nav class="footer-nav">
                    <ul>
                        <li><a href="./about.html">About Us</a></li>
                        <li><a href="./contact.html">Contact Us</a></li>
                        <li><a href="./privacy.html">Privacy Policy</a></li>
                        <li><a href="./terms.html">Term of service</a></li>
                    </ul>
                </nav>
                <div class="footer-info">
                    <p>&copy; 2025 AceHub reserves all rights</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="../header-footer/navigation.js"></script>
    <script src="../account/account.js"></script>
     <!--页眉js-->
     <script>
        //Retrieve user information based on token
window.onload = function () {
const userid = localStorage.getItem('token');
//If a user logs in, display their profile picture in the info div; if not, display the login and registration button
if (userid) {
const user = JSON.parse(localStorage.getItem(userid));
let profileUrl = '';
let profileName = '';
let accountUrl = '';
if (userid === 'admin') {
profileUrl = '../account/admin-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/admin-profile.html';
} else if (userid === 'teacher') {
profileUrl = '../teacher/teacher-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/teacher-setting.html';
} else {
profileUrl = '../student/student-profile.html';
ProfileName='My Learning';
accountUrl = '../account/student-setting.html';
}
document.querySelector('.info').innerHTML = `
                    <a href="${profileUrl}">
                        <img id="user-head" src="${user.avatar}" alt="用户头像"></a>
                    <div class="card">
                        <ul>
                            <li><a href="${profileUrl}">${profileName}</a></li>
                            <li><a href="${accountUrl}">Account Settings </a></li>
                            <li><a id="logout" href="#logout">Log Out</a></li>
                        </ul>
                    </div>
                `;
                //如果点击退出登录，清除token
                document.getElementById('logout').addEventListener('click', () => {
                    localStorage.removeItem('token');
                    window.location.href = '../Homepage/WebsiteHomepage.html';
                });
            }
            else {
                document.querySelector('.info').innerHTML = `
                    <a href="../account/login.html"><button class="login">log on</button></a>
                    <a href="../account/register.html"><button class="register">register</button></a>
                `;
            }
        }
    </script>
</body>
</html>